<!--
 * @Author: zhouwr 1551541860@qq.com
 * @Date: 2024-02-27 21:08:07
 * @LastEditors: zhouwr 1551541860@qq.com
 * @LastEditTime: 2024-02-27 22:50:37
 * @FilePath: /jeecgboot-vue3/src/views/activiti/procdef/components/actProcessDefConfig/activity/ConfigActivityOption.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <BasicDrawer :title="drawerTitle" v-bind="$attrs" width="500px" @register="register" destroyOnClose showFooter @ok="handleSubmit">
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>

<script setup lang="ts">
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
  import { useForm, BasicForm } from '/@/components/Form'
  import { ref, reactive } from 'vue'

  import { activityOptionFormSchemas, activityOptionFormData } from './ConfigActivity.data'

  // Emits声明
  const emit = defineEmits(['register', 'success'])

  const drawerTitle = ref<string>('')
  const isUpdate = ref<boolean>(false)

  const form = reactive({ ...activityOptionFormData })

  const [register, { closeDrawer, setDrawerProps }] = useDrawerInner(async (data) => {
    console.log('useDrawerInner', data)
    if (data.record.id) {
      isUpdate.value = true
      drawerTitle.value = '编辑节点【' + data.record.name + ']'
    } else {
      isUpdate.value = false
      drawerTitle.value = '新增节点'
    }
    await resetFields()

    //TODO 根据流程第一id 和 节点id 查询节点操作配置信息

    console.log(form)
    await setFieldsValue(form)
  })

  /**
   * BasicForm绑定注册;
   * useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;
   * 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,submitButtonOptions：自定义按钮文本和图标等方法）；
   * 平台通过此封装，简化了代码，支持自定义扩展;
   */
  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
    //注册表单列
    schemas: activityOptionFormSchemas,
    //回车提交
    autoSubmitOnEnter: false,
    //不显示重置按钮
    showResetButton: false,
    showSubmitButton: true,
    labelWidth: 140,
    //查询列占比 24代表一行 取值范围 0-24
    actionColOptions: { span: 17 },
  })

  /**
   * 点击提交按钮的value值
   */
  async function handleSubmit() {
    try {
      let values = await validate()
      console.log('提交按钮数据::::', values)
      setDrawerProps({ confirmLoading: true })

      //关闭弹窗
      closeDrawer()
      //刷新列表
      emit('success', { isUpdate, values })
    } finally {
      setDrawerProps({ confirmLoading: false })
    }
  }
</script>
